﻿@using EasyXaf.EntityDesigner.Editors.DetailViewEditors.Models

<div id="@PanelId" class="@GetPanelClass()" style="@Style">
    @if (!Root)
    {
        <div class="panel-title ignore-elements">
            <div class="panel-direction" @onclick="OnDirectionChanged">
                <XafImage ImageName="@(Panel.LayoutDirection == LayoutDirection.Horizontal ? "designer-h-panel" : "designer-v-panel")" Color="#999" Size="12" />
            </div>
            @if (!string.IsNullOrWhiteSpace(Panel.Caption))
            {
                <div class="panel-caption">@Panel.Caption</div>
            }
            @if (Panel.IsCollapsibleGroup == BusinessObjects.DefaultBoolean.True)
            {
                <XafImage CssClass="panel-collapsible" ImageName="Actions_Arrow3Down" Color="#ccc" Size="14" />
            }
        </div>
    }
    @foreach (var component in Panel.Components)
    {
        if (component is PropertyEditor propertyEditor)
        {
            <PropertyEditorComponent @key="component.Oid" Style="@GetComponentStyle(component)" PropertyEditor="propertyEditor" />
        }
        else if (component is Panel panel)
        {
            <PanelComponent @key="component.Oid" Style="@GetComponentStyle(component)" Panel="panel" />
        }
        else if (component is Tabs tabs)
        {
            <TabsComponent @key="component.Oid" Style="@GetComponentStyle(component)" Tabs="tabs" />
        }
    }
    <div class="panel-tools ignore-elements">
        <XafImage CssClass="panel-tool tool-setting" ImageName="Actions_Settings" Color="#999" Size="16" @onclick="OnSetting" />
        <XafImage CssClass="panel-tool tool-delete" ImageName="Actions_Delete" Color="#999" Size="16" @onclick="OnDelete" />
    </div>
</div>